<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web版本表白墙</title>
    <style>
        * {
            margin:0;
            padding: 0%;
            box-sizing: border-box;
        }
        .container {
            text-align: center;
            margin: 30px 0;
        }
        .container h2 {
            text-align: center;
            margin: 30px 0;
            color: rebeccapurple;
        }
        .row {
            height: 43px;
            display: flex;
            justify-content: center;
            margin: 3px;
        }
        .row span {
            height: 50px;
            width: 92px;
            margin: 8px;
            color: rgb(8, 7, 7);
        }
        .row button {
            width: 310px;
            height: 44px;
            border-radius: 10px;
            border: none;
            background-color: orange;
        }
        button:active{
            background-color: olive
        }
        #from {
            font-size:10px;
            border-radius: 7px;
            width: 200px;
        }
        #message {
            font-size:10px;
            border-radius: 7px;
            width: 200px;
        }
        #to {
            font-size:10px;
            border-radius: 7px;
            width: 200px;
        }
    </style>
</head>
<body>
<div class = "container">
    <h2>表白墙</h2>
    <div class = "row">
        <span>谁</span>
        <input type="text" id = "from">
    </div>
    <div class = "row">
        <span>对谁</span>
        <input type="text" id = "to">
    </div>
    <div class = "row">
        <span>说什么</span>
        <input type="text" id = "message">
    </div>
    <div class = "row">
        <button>提交</button>
    </div>
</div>

     
    <!-- 引入Jquery.js -->
    <script src = "https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script>
        //选中页面上的元素
        let container = document.querySelector('.container');
        let fromInput = document.querySelector('#from');
        let toInput = document.querySelector('#to');
        let messageInput = document.querySelector('#message');
        let button = document.querySelector('button');
        //点击事件
        button.onclick = function() {
            let from = fromInput.value;
            let to = toInput.value;
            let message = messageInput.value;
            let newdiv = document.createElement('div');
            if(from==''||to==''||message=='' || newdiv==''){
                return;
            }
            newdiv.className = 'row';
            newdiv.innerHTML = from + "对" + to + "说" + message;
            //然后把它插入到div末尾
            container.appendChild(newdiv);
            fromInput.value = '';
            toInput.value = '';
            messageInput.value = '';
            
            /* 当点击提交的时候,要构造成Post请求提交给后端服务器 */
            
            /* 构造好一个JS对象-->使用JSON格式 */
            let messageJSON = {
                'from': from,
                'to': to,
                'message': message
            };

            $.ajax({
                type: 'post',
                url: 'message',
                contentType: 'application/json;charset=utf8',
                data: JSON.stringify(messageJSON),
                success:function(body){
                    alert('提交成功!!!!');
                },
                error:function(body){
                    alert('提交失败!!!');
                }
            });
        }
        
        /* 当页面加载的时候,前端就要构造好get请求从后端获取数据,然后显示在页面上*/
        function load(){
            $.ajax({
               type: 'get',
               url: 'message',
               success:function(body){
                    /* 成功接收到从后端拿来的数据就可以显示在页面上*/
                    /* 由于ajax会自动进行类型专黄 根据application/json 自动将JSON字符串转成JS数组 */
                    let container = document.querySelector('.container');
                    for(let message of body){
                        let newDiv = document.createElement('div');
                        newDiv.className = "row";
                        newDiv.innerHTML = message.from + "对" + message.to + "说" + message.message; 
                        container.appendChild(newDiv);
                    }        
               }
            });
        }
        
        load();

    </script>
</body>
</html>